<template>
    <div class="balanceArea">
        <span>共 {{ getTotalQuantity }} 件商品，合计：</span>
        <span class="values">￥{{ getTotalCost }}</span>
        <button>结算</button>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'balanceArea',
  computed: {
    ...mapGetters('itemInfo', ['getTotalCost', 'getTotalQuantity'])
  }
}
</script>

<style scoped>
.balanceArea{
    user-select: none;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    height: 3em;
    line-height: 3em;
}
button{
    width: 5em;
    height: 2em;
    background-color: #37AA84;
    color: white;
    border-radius: 5em;
    border: none;
    margin-left: 5px;
    cursor: pointer;
}
</style>
